<template>
  <div class="Dbox">
    <van-nav-bar
      title="新建档案"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-notice-bar wrapable :scrollable="false" text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证!" class="gen" />
    <h3 class="jbxx">基本信息</h3>
    <div class="x-box">
      <div class="yu">
        <p style="padding-top:5px;">与您的关系</p>
        <!-- <button>本人</button>
        <button>配偶</button>
        <button>父母</button>
        <button>子女</button>
        <button>亲戚</button>
        <button>朋友</button> -->
        <button v-for="item in gx" :key="item.id" @click="btn(item)" >
          {{item.name}}
        </button>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field
            v-model="name"
            required
            label="姓名"
            placeholder="请输入真实姓名"
            class="z-name"
          />
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field
            v-model="idnumber"
            required
            label="身份证号"
            placeholder="请输入身份证号码"
          />
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field
            v-model="time"
            required
            label="出生日期"
          >
            <template #input>
              <div class="pup">
              <van-cell @click="showPopup">
                <button class="place">请选择</button>
              </van-cell>
              <van-popup v-model:show="show" position="bottom" :style="{ padding: '64px' }">
                <van-date-picker
                  v-model="currentDate"
                  title="选择日期"
                  :min-date="minDate"
                  :max-date="maxDate"
                />
              </van-popup>
              </div>
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field
            v-model="sex"
            required
            label="性别"
          >
            <template #input>
              <div class="nn">
                <button v-for="(item,index) in sexs" :key="index" @click="sexbtn(item)">
                  {{item.sex}}
                </button>
              </div>
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <div class="x-b">
        <van-cell-group inset>
          <van-field
            v-model="tel"
            required
            label="联系方式"
            placeholder="请输入联系方式"
          />
        </van-cell-group>
      </div>
    </div>
    <button class="bc" @click="save">保存</button>
  </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const gx = ref([
  {
    id:1,
    name:'本人'
  },
  {
    id:2,
    name:'配偶'
  },
  {
    id:3,
    name:'父母'
  },
  {
    id:4,
    name:'子女'
  },
  {
    id:5,
    name:'亲戚'
  },
  {
    id:6,
    name:'朋友'
  }
])
const sexs = ref([
  {
    sex:'男'
  },
  {
    sex:'女'
  },
])
const minDate = new Date(2000,0,1)
const maxDate = new Date(2025,5,1)
const currentDate = ref([]);
console.log(currentDate.value)
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const btn =(item)=>{
  console.log(item.name)
  localStorage.setItem('gx',item.name)
}
const sexbtn=(item)=>{
  console.log(item.sex)
  localStorage.setItem('sex',item.sex)
}
// 姓名
const name = ref('')
// 身份证号
const idnumber = ref('')
// 出生日期
const time = ref('')
// 性别
const sex = ref('')
// 联系方式
const tel = ref('')
// 保存
const save =()=>{
  console.log({data:{
    name:name.value,
    idnumber:idnumber.value,
    time:time.value,
    sex:sex.value,
    tel:tel.value
  }})
  localStorage.setItem('data',JSON.stringify({
    name:name.value,
    idnumber:idnumber.value,
    time:time.value,
    sex:sex.value,
    tel:tel.value
  }))
  router.push('/jkda')
}

const onClickLeft = () => history.back();
</script>
<style scoped>
.Dbox{
  position: relative;
}
.gen{
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  background-color: #FFEFE3;
  color: #FF5B08;
}
.jbxx{
  margin-left: 50px;
  margin-top: 40px;
}
.x-box{
  width: 100%;
  height: 800px;
  background-color: #F5F5F5;
  position: absolute;
  top: 380px;
}
.yu{
  width: 92%;
  height: 170px;
  /* position: absolute; */
  background-color: #fff;
  border-radius: 10px;
  margin-left: 4%;
}
.yu>p{
  font-size: 30px;
  margin: 20px;
}
.yu>button{
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 50%;
  background-color: #D0D0D0;
  color: #fff;
  margin-left: 27px;
}
.x-b{
  margin-top: 20px;
}
.nn{
  margin-left: 220px;
}
.nn>button{
  width: 80px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-left: 20px;
  border-radius: 5px;
}
.bc{
  width: 90%;
  height: 80px;
  background-color: #0070FF;
  color: #fff;
  border: none;
  border-radius: 10px;
  margin-left: 5%;
  position: fixed;
  bottom: 30px;
  font-size: 30px;
}
.place{
  border: none;
  background-color: #fff;
  font-size: 30px;
}
.pup{
  height: 50px;
  margin-top: -40px;
  margin-left: -30px;
  color: #ADADAD;
}
</style>
